<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" type="image/ico" href="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Pragma" content="no-cache" />
    <style>
      * {
        font-size: 28px;
      }
    </style>
  </head>

  <body>
    <div class="audio-state">null</div>
    <audio
      controls
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
    ></audio>
    <div>
      <button class="play-button">click 播放</button>
    </div>
    <div class="doc"></div>
    <script>
      if ("mediaSession" in navigator) {
        navigator.mediaSession.metadata = new MediaMetadata({
          title: "播客音乐名字",
          artist: "播客主持人",
          album: "播客名字",
        });

        navigator.mediaSession.setActionHandler("play", onPlay);
        navigator.mediaSession.setActionHandler("pause", onPause);

        function onPlay() {
          audio.play();
          navigator.mediaSession.playbackState = "playing";
          console.log("i am playing");
        }

        function onPause() {
          audio.pause();
          navigator.mediaSession.playbackState = "Paused";
          console.log("i am paused");
        }
      }
      let playButton = document.querySelector(".play-button");
      let audio = document.querySelector("audio");

      playButton.onclick = function () {
        audio.play();
      };
    </script>
  </body>
</html>
